<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<body>
<div id="popups-form-box">
    <div class="popups-window">
        <form>
            <a class="close" href="#">X</a>
            <span class="title">创建主题</span>
            <div class="main">
                <table>
                    <tbody>
                    <tr>
                        <td><span class="label">主题名称：</span></td>
                        <td>
                            <input autoComplete="off" maxLength="20" minLength="1" name="title" placeholder="1~20位字符"
                                   required type="text">
                        </td>
                        <td><span class="label">创建人：</span></td>
                        <td>
                            <input autoComplete="off" maxLength="10" minLength="1" th:value="${user.name}" name="name"
                                   disabled
                                   required type="text">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="button-box">
                <input type="submit" value="确定">
                <a class="no" href="#">关闭</a>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    // 监听关闭按钮
    $('#popups-form-box > .popups-window > form > .close').click(function (e) {
        e.preventDefault();
        $('#popups-box').hide();
        window.location.reload();
    });
    $('#popups-form-box > .popups-window > form > .button-box > .no').click(function (e) {
        e.preventDefault();
        $('#popups-box').hide();
        window.location.reload();
    });

    // 监听表单提交
    $('#popups-form-box > .popups-window > form').submit(function () {
        // 获取数据
        let name = $('#popups-form-box input[name="name"]').val();
        let title = $('#popups-form-box input[name="title"]').val();

        // 提交数据
        $('#popups-form-box .main').html(`<span>数据提交中...</span>`);
        $.ajax({
            url: 'add_TaoLun',
            type: "POST",
            data: {
                'name': name,
                'title': title
            },
            success: function (res) {
                $('#popups-form-box input[type="submit"]').remove();
                $('#popups-form-box .main').html(res);
            }
        });

        return false;
    });
</script>
</body>
</html>
